<template>
    <!-- 修改资料 -->

    <div>
        <el-form label-width="100px" :model="form" label-position="right" ref="formRef" :rules="formRules" disabled class="borderNone">
            <el-card>
                <el-row>
                    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                        <el-form-item label="出差时间" prop="visitDateTime">
                            <el-input v-model="form.visitDateTime" />
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                        <el-form-item label="出差计划记录">
                            <el-input v-model="form.travelPlanIdNumber"/>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                        <el-form-item label="系统提醒">
                            <el-input v-model="form.visitObjectKindName"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                        <el-form-item label="客户名称">
                            <el-input v-model="form.custName" disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                        <el-form-item label="客户联系人">
                            <el-input v-model="form.custMan"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                        <el-form-item label="联系电话">
                            <el-input v-model="form.custPhone"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                        <el-form-item label="类型">
                            <el-input v-model="form.visitTypeName"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-card>
            <el-card style="margin-top: 10px;">
                <el-tabs v-model="activeName">
                    <el-tab-pane label="基本信息" name="first">
                        <el-row>
                            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                                <el-form-item label="场所">
                                    <el-input v-model="form.exchangePlace"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                                <el-form-item label="客户出席者">
                                    <el-input v-model="form.custAttendant" type="textarea"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                                <el-form-item label="公司出席者">
                                    <el-input v-model="form.accompaniedBy"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                                <el-form-item label="业务员">
                                    <el-input v-model="form.employeeName" disabled></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-table v-if="dataList.length>0" :data="dataList" :span-method="arraySpanMethod" border style="width: 100%">
                            <el-table-column label="项目" prop="contentKindName" width="120"></el-table-column>
                            <el-table-column label="商洽事项" prop="content" width="500">
                            </el-table-column>
                            <el-table-column label="担当" prop="accompaniedBy" width="400">
                            </el-table-column>
                            <el-table-column label="期限" prop="writeDate">
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>
                    <el-tab-pane label="报告附件" name="third">
                        <tsFormTable v-model="dtlList" disabled>
                            <template #tableContent>
                                <el-table-column prop="fileName" label="文件名"></el-table-column>
                                <el-table-column  label="图片" width="100">
                                    <template #default="scope">
                                        <el-image v-if="checkType(scope.row) == 'image'" alt="上传图片"
                                            :src="scope.row.fileFullPath"
                                            @click="openDialog(scope.row.fileFullPath)"></el-image>
                                        <video v-else-if="checkType(scope.row) == 'video'" :src="scope.row.fileFullPath"
                                            controls style="width: 100%;height: 100%;"></video>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="fileKindName" label="类别">
                                </el-table-column>
                                <el-table-column prop="itemIndex" label="排序">
                                </el-table-column>
                                <el-table-column prop="remark" label="备注">
                                </el-table-column>
                                <el-table-column label="是否需要发送邮件">
                                    <template #default="scope"> 
                                        <el-switch v-model="scope.row.needSendEmail" active-value="1" inactive-value="0" disabled></el-switch>
                                    </template>
                                </el-table-column>
                            </template>
                        </tsFormTable>
                    </el-tab-pane>
                </el-tabs>
            </el-card>
            <el-card style="margin-top: 10px;">
                <el-row v-if="form.isSendEmail == '1'">
                    <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :offset="4">
                        <el-form-item label="发送邮件标题" prop="sendEmailTitle">
                            <el-input v-model="form.sendEmailTitle"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col  :xs="24" :sm="24" :md="24" :lg="4" :xl="4">
                        <el-form-item label="邮件提醒" prop="isSendEmail">
                            <el-switch v-model="form.isSendEmail" active-value="1" inactive-value="0"></el-switch>
                        </el-form-item>
                    </el-col>
                    <el-col v-if="form.isSendEmail == '1'" :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
                        <el-form-item label="收件人" prop="mailto">
                            <el-input v-model="form.mailto"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row v-if="form.isSendEmail == '1'">
                    <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :offset="4">
                        <el-form-item label="抄送者邮箱" prop="mailcopy">
                            <el-input v-model="form.mailcopy"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row v-if="form.isSendEmail == '1'">
                    <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :offset="4">
                        <el-form-item label="密件抄送邮箱" prop="mailBcc">
                            <el-input v-model="form.mailBcc"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="备注">
                    <el-input v-model="form.remark" type="textarea" :autosize="{ minRows: 2 }"></el-input>
                </el-form-item>
            </el-card>
        </el-form>

        <div class="button-position" style="margin-top: 5px;">
            <el-button @click="updateVisible">取 消</el-button>
        </div>
        <el-dialog v-model="dialogVisible">
            <img :src="dialogImageUrl" alt="Preview Image" w-full style="width: 100%;" />
        </el-dialog>
    </div>
</template>

<script setup>
import { reactive, ref, onMounted, watch } from 'vue';
import { Delete, Edit, Search, Plus } from '@element-plus/icons-vue'
import { ElNotification } from 'element-plus';
import Api from '@/api/model/trip'
import sysApi from '@/api/model/system'
import tsFormTable from '@/components/scFormTable/index.vue'
import { checkType } from '@/utils/checkType.js'
const emit = defineEmits(['updatetable'])
const props = defineProps({
    paramsData: {
        type: Object,
        defalut: {}
    }
})
// 添加用户数据的对象
const form = ref({})
const dtlList = ref([])
const addTemplate = ref()
const content  = ref({})
const configData = ref({})
const dataList = ref([])
const activeName = ref('first')
const dialogVisible = ref(false)
const dialogImageUrl = ref('')
const formRef = ref()
const formRules = reactive({
    number: [
        { required: true, message: "请输入编号", trigger: "blur" }
    ]
})
onMounted(() => {
    getInit()
})
const getInit = async (val) => {
    let res = await Api.visit.detail.post(props.paramsData)
    console.log(res)
    if (res.code == '200') {
        form.value = res.data
        configData.value = res.configData
        dataList.value = res.dataList
        addTemplate.value = res.file
        content.value = res.content
        dtlList.value = res.dtlList
    }
}
const openDialog = (val) => {
    dialogImageUrl.value = val
    dialogVisible.value = true
}
const arraySpanMethod = ({ row, column, rowIndex, columnIndex }) => {
    const fields = ['contentKindName']
    // 当前行的数据
    const cellValue = row[column.property]
    // 判断只合并定义字段的列数据
    if (cellValue && fields.includes(column.property)) {
        const prevRow = dataList.value[rowIndex - 1] //上一行数据
        let nextRow = dataList.value[rowIndex + 1] //下一行数据
        // 当上一行的数据等于当前行数据时，当前行单元格隐藏
        if (prevRow && prevRow[column.property] === cellValue) {
            return { rowspan: 0, colspan: 0 }
        } else {
            // 反之，则循环判断若下一行数据等于当前行数据，则当前行开始进行合并单元格
            let countRowspan = 1 //用于合并计数多少单元格
            while (nextRow && nextRow[column.property] === cellValue) {
                nextRow = dataList.value[++countRowspan + rowIndex]
            }
            if (countRowspan > 1) {
                return { rowspan: countRowspan, colspan: 1 }
            }
        }
    }
}
const updateVisible = (val) => {
    emit('updatetable')
}


</script>
<style lang="less" scoped>
.borderNone {
    :deep(.el-input__wrapper) {
        box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
        cursor: default;
        background-color: transparent; //背景颜色透明
        border-bottom: 1px solid #999;
        border-radius: 0;

        .el-input__inner {
            cursor: default !important;
        }
    }

    :deep(.el-textarea__inner) {
        box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
        cursor: default;
        background-color: transparent; //背景颜色透明
        border-bottom: 1px solid #999;
        border-radius: 0;
    }
}
</style>



